<template>
   <view class="classfy_cell">
        <navigator
            url="/pages/index/index"
            open-type="navigate"
            hover-class="navigator-hover"
            v-for="item of list"
            :key="item.id"
            class="navigator"
        >
            <image
                :src="item.icon"
                class="img"
                />
            <text class="text">{{item.name}}</text>
        </navigator>
   </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { getHomeClassfy } from "@/api/home/index";
import { onLoad } from '@dcloudio/uni-app';
import type { classfyItem } from '@/types/home';

let list = ref<classfyItem[]>([])

onLoad(() => {
    getData()
})

const getData = async () => {
    let res = await getHomeClassfy<classfyItem[]>()
    
    list.value = res.result
    
}
</script>

<style scoped lang='scss'>
.classfy_cell {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    .navigator {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 20%;
        margin-top: 20rpx;
        .img {
            width: 100rpx;
            height: 100rpx;
        }
        .text {
            font-size: 30rpx;
        }
    }
}
</style>
